<template>
  <div class="student-container">
    <div class="head">
      <div class="top">
        <el-form ref="form" :inline="true" :model="form" label-width="100px">
          <el-form-item label="班级名称:">
            <el-input type="text" v-model="form.class" placeholder></el-input>
          </el-form-item>
          <el-form-item label="班级人数:">
            <el-input type="text" v-model="form.people" placeholder></el-input>
          </el-form-item>
          <el-form-item label="带班老师:">
            <el-input type="text" v-model="form.teacher" placeholder></el-input>
            <el-button>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot">
        <el-button @click="addStu">新增学生</el-button>
        <el-button @click="leave">离校</el-button>
        <el-button @click="getPay">收费</el-button>
        <el-button>批量导入</el-button>
        <el-button type="danger" @click="del">删除</el-button>
        <span>下载模板</span>
      </div>
    </div>
    <div class="main">
      <!--  @select="selection" 选择单个 @select-all="disabledAll" 选择全部 -->
      <el-table
        ref="studentTable"
        :data="studentData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#f5f4f4',color:'#606266'}"
      >
        <el-table-column type="selection" width="90" label="选择"></el-table-column>
        <el-table-column prop="studentname" label="学生姓名" width="230"></el-table-column>
        <el-table-column prop="classname" label="所在班级" width="280"></el-table-column>
        <el-table-column prop="mobile" label="家长手机号" width="230"></el-table-column>
        <el-table-column prop="sex" label="性别" width="210"></el-table-column>
        <el-table-column prop="state" label="状态" width="215"></el-table-column>
        <el-table-column label="操作" width="290">
          <template slot-scope="scope">
            <el-button size="small" style="color:#ff0000" @click="record">缴费记录</el-button>
            <el-button size="small" @click="addStu">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="prev, pager, next, sizes, jumper"
          :total="100"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增学生"
      :visible.sync="stuShow"
      width="70%"
      class="addstu"
      :before-close="handleClose">
      <el-form ref="form" :model="addstu" label-width="100px">
        <el-form-item label="学生姓名:">
          <el-input type="text" v-model="addstu.name" placeholder></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio v-model="addstu.sex" label="1">男</el-radio>
          <el-radio v-model="addstu.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="家长手机号:">
          <el-input type="text" v-model="addstu.mobile" placeholder></el-input>
        </el-form-item>
        <el-form-item label="所在班级:">
          <el-select v-model="addstu.class" placeholder>
            <el-option v-for="(item,index) in tclass" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="addstu.state" placeholder>
            <el-option label="在校" value="stay"></el-option>
            <el-option label="离校" value="leave"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="addstu.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeStu">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="收费"
      :visible.sync="payShow"
      width="70%"
      class="pay"
      :before-close="handleClose">
      <el-form ref="form" :model="payclass" label-width="100px">
        <el-form-item label="缴费账单名称:">
          <el-input type="text" v-model="payclass.name" placeholder="缴费账单名称"></el-input>
        </el-form-item>
        <el-form-item label="收费项:">
          <div class="item">
            <el-input type="text" v-model="payclass.contribution1" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue1" placeholder="金额"></el-input>
            <el-button>删除</el-button>
            <el-button>添加项</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution2" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue2" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution3" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue3" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution4" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue4" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="缴费截止日期:">
          <el-date-picker v-model="payclass.date" type="date" placeholder="年/月/日"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closePay">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="缴费记录"
      :visible.sync="recordShow"
      width="70%"
      class="record"
      :before-close="handleClose">
      <el-table :data="recordData" border style="width: 97%">
        <el-table-column prop="billname" label="缴费账单名称" width="180"></el-table-column>
        <el-table-column prop="class" label="班级" width="160"></el-table-column>
        <el-table-column prop="student" label="学生" width="140"></el-table-column>
        <el-table-column prop="mobile" label="家长手机" width="140"></el-table-column>
        <el-table-column prop="finaldate" label="缴费截止日期" width="180"></el-table-column>
        <el-table-column prop="contribution1" label="缴费项1" width="118"></el-table-column>
        <el-table-column prop="contribution2" label="缴费项2" width="115"></el-table-column>
        <el-table-column prop="contribution3" label="缴费项3" width="115"></el-table-column>
        <el-table-column prop="contribution4" label="缴费项4" width="115"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeRecord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetStudentdata, GetClass } from "@/api/class";
import { GetRecorddata } from "@/api/detail";
export default {
  name: "student",
  data() {
    return {
      currentPage: 1,
      stuShow: false,
      payShow: false,
      recordShow:false,
      form: {
        class: "",
        people: "",
        teacher: ""
      },
      studentData: [],
      tclass:[],
      addstu: {
        name: "",
        sex: "",
        mobile: "",
        class: "三年级一班",
        state: "在校",
        remarks: ""
      },
      payclass: {
        name: "",
        contribution1: "",
        contribution2: "",
        contribution3: "",
        contribution4: "",
        contributionvalue1: "",
        contributionvalue2: "",
        contributionvalue3: "",
        contributionvalue4: "",
        date: ""
      },
      recordData: []
    };
  },
  mounted() {
    this.init();
    this.records();
    this.getCalss();
  },
  methods: {
    init() {
      GetStudentdata().then( res => {
        if(res.code === 200) {
          this.studentData = res.data;
        }
      })
    },
    records() {
      GetRecorddata().then( res => {
        if(res.code === 200) {
          this.recordData = res.data;
        }
      })
    },
    getCalss() {
      GetClass().then( res => {
        if(res.code === 200) {
          this.tclass = res.data;
        }
      })
    },
    addStu() {
      this.stuShow = true;
    },
    closeStu() {
      this.stuShow = false;
    },
    getPay() {
      this.payShow = true;
    },
    closePay() {
      this.payShow = false;
    },
    record() {
      this.recordShow = true;
    },
    closeRecord() {
      this.recordShow = false;
    },
    leave() {
      this.$alert("是否离校?", "离校", {
        confirmButtonText: "确定"
      });
    },
    del() {
      this.$alert("是否删除?", "删除", {
        confirmButtonText: "确定"
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.student-container {
  width: 98%;
  height: 865px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
  padding: 30px 60px;
}
.head {
  width: 100%;
  height: 145px;
  .top {
    width: 97%;
    height: 60px;
    margin: 0 auto;
    padding-top: 20px;
    /deep/ .el-form-item__label {
      width: 101px !important;
    }
    /deep/ .el-input {
      width: auto;
    }
    /deep/ .el-button {
      margin-left: 20px;
    }
  }
  .foot {
    margin-left: 55px;
    margin-top: 25px;
    span {
      margin-left: 20px;
      color: #5255ff;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  .el-table{
    /deep/ .cell {
      text-align: center;
    }
    /deep/ .el-table_2_column_20 {
      color: #109cef;
    }
    /deep/ .el-button{
      border: none;
      color: #00f;
      padding: 0;
    }
  }
  .block {
    float: right;
    margin-top: 20px;
    /deep/ .el-pagination button {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li.active {
      background: #409eff;
      color: #fff;
      border: none;
    }
  }
}
.addstu {
  /deep/ .el-dialog {
    .el-form-item__content {
      width: 14%;
    }
    .el-form-item:last-of-type {
      .el-form-item__content {
        width: 40%;
      }
    }
    .el-textarea__inner {
      width: 250px;
      height: 160px;
    }
  }
}
.pay {
  /deep/ .el-dialog {
    .el-form-item__label {
      width: 101px !important;
    }
    .el-form-item__content {
      margin-left: 120px !important;
      width: 15%;
    }
    .el-form-item:nth-child(2) {
      .el-form-item__content {
        width: 50%;
      }
    }
    .item {
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      .el-input {
        width: 30%;
        margin-right: 5px;
      }
    }
  }
}
.record {
  /deep/ .el-dialog {
    .el-table{
      color: #000;
      margin: 0 auto;
      /deep/ .cell{
        text-align: center;
      }
    }
    .el-table--border{
      border: 1px solid #000;
    }
    .el-table--border td{
      border-right: 1px solid #000;
    }
    .el-table--border th{
      border-right: 1px solid #000;
    }
    .el-table td{
      border-bottom: 1px solid #000;
    }
    .el-table th.is-leaf{
      border-bottom: 1px solid #000;
    }
  }
}
</style>
